<template>
  <div class="asset">
    <div class="head-left">
      <div class="zc-dy">
        <span>我的资产（净资产折合）</span>
        <img @click="collect" src="../../assets/open_eye.png" v-show="downIcon" />
        <img @click="collect" src="../../assets/close_eye.png" v-show="!downIcon" />
      </div>
      <p v-show="downIcon">
        <span style="font-size:22px;color:#10131e;font-weight:bold">{{allzk}}</span>
        <span style="font-size:16px;color:#10131e">USDT ≈ {{cnya}}CNY</span>
      </p>
      <p v-show="!downIcon">
        <span style="font-size:22px;color:#10131e;font-weight:bold">-------</span>
        <span style="font-size:16px;color:#10131e">USDT ≈ -----CNY</span>
      </p>
    </div>
    <div style="width:9.2rem;margin:auto">
      <cube-slide
        :showDots="false"
        :auto-play="false"
        ref="slide"
        :data="items"
        @change="changePage"
      >
        <cube-slide-item
          v-for="(item, index) in items"
          :key="index"
          @click.native="clickHandler(item, index)"
        >
          <a href="javascript:;" style="position:relation">
            <img style="height:4.266667rem" :src="item.image" />
            <div class="qbzh">
              <p style="color:hsla(0,0%,100%,.7);">{{item.wz1}}</p>
              <p style="margin-top:.9rem">
                <span>折合&nbsp;</span>
                <span style="font-size:18px;font-weight:bold">{{wz30}}</span>
                <span v-if="item.wz1=='挖矿奖励'">&nbsp;BBZ</span>
                <span v-else>&nbsp;USDT</span>
              </p>
              <p style="margin-top:.2rem">≈ {{wz31}} CNY</p>
            </div>
          </a>
          <div class="zh-list">
            <a href="javascript:;" @click="ts1" v-if="item.wz1=='钱包账户'">
              <img src="../../assets/zh-list1.png" alt />
              <span>充币</span>
            </a>

            <a href="#/addmoney" @click="ts2" v-if="item.wz1=='钱包账户'">
              <img src="../../assets/zh-list2.png" alt />
              <span>提币</span>
            </a>

            <a href="#/trade" v-if="item.wz1=='币币账户'">
              <img src="../../assets/jiaoyi1.png" alt />
              <span>交易</span>
            </a>

            <a href="#/otc?id=sell" v-if="item.wz1=='OTC账户'">
              <img src="../../assets/imai.png" alt />
              <span>我要卖</span>
            </a>
            <a href="#/otc" v-if="item.wz1=='OTC账户'">
              <img src="../../assets/imai1.png" alt />
              <span>我要买</span>
            </a>

            <a href="#/transfer">
              <img src="../../assets/zh-list3.png" alt />
              <span>划转</span>
            </a>
          </div>
        </cube-slide-item>
      </cube-slide>
    </div>
    <div style="height:.24rem;background:#f1f1f1"></div>
    <div class="zclist_head">
      <div class="zcmx" :class="{ active: isActive }" @click="chooseByts(1)">资产明细</div>
      <div class="zhls" :class="{ active: !isActive }" @click="chooseByts">账户流水</div>
      <div
        class="ns3"
        style="display: flex;display: -webkit-flex;align-items: center"
        @click="chooseImg"
      >
        <img :src="simg" style="width: .373333rem;height: .373333rem;margin-right: .2rem" alt />
        <span>隐藏为0的资产</span>
      </div>
    </div>

    <!-- <div class="zcmx_block1" >
        <img src="/zc/img/zwsj.png" alt="">
        <div class="wz">暂无更多数据</div>
    </div>-->

    <!-- 账户流水 -->

    <div class="zcmx_block2" v-for="(v,index) in zc_listh" :key="index" v-if="!isActive">
      <div class="head">
        {{v.name}}
        <span style="font-size: 5px;">{{v.createtime}}</span>
      </div>
      <div class="content">
        <div>
          <p class="ns1">数量</p>
          <p>{{v.money}}</p>
        </div>
        <div style="text-align: center">
          <p class="ns1">{{v.title}}</p>
          <p>{{v.newmoney}}</p>
        </div>
        <div style="text-align: right">
          <p class="ns1">手续费</p>
          <p>{{v.fee}}</p>
        </div>
      </div>
    </div>

    <div class="cxk1">
      <!-- block1切换 -->

      <!-- 资产明细 -->

      <div v-if="bursetype==2">
        <p class="tname">推广奖励（BBZ）</p>
        <p class="tdata tdata1"><span>可用</span><span class="ree">折合（CNY）</span></p>
        <p class="tdata tdata2"><span style="font-weight: bold;">{{gmoney}}</span><span class="ree ree1">{{gcny}}</span></p>
      </div>
      <div
        class="zcmx_block2 wyyc0"
        v-if="bursetype!=4"
        style="display: block;"
        v-for="(item,index) in zc_list"
        :key="index"
      >
        <div class="head">{{item.name}}</div>
        <div class="content">
          <div v-if="indexs==0||indexs==1||indexs==2||indexs==4">
            <p class="ns1">可用</p>
            <p class="wssl0">{{item.money}}</p>
          </div>
          <div v-if="indexs==2" style="text-align: center">
            <p class="ns1">
              划入待审
              <img style="width: 14px;height: 13px" src="/zc/img/gth.png" alt />
            </p>
            <p>{{item.waitmoney}}</p>
          </div>
          <div v-if="indexs==1" style="text-align: center">
            <p class="ns1">委托</p>
            <p>{{item.blowmoney}}</p>
          </div>
          <div v-if="indexs==0||indexs==2||indexs==4" style="text-align: center">
            <p class="ns1">冻结</p>
            <p>{{item.frostmoney}}</p>
          </div>
          <div v-if="indexs==1||indexs==2||indexs==4" style="text-align: right">
            <p class="ns1">折合（CNY）</p>
            <p>{{item.zhcny}}</p>
          </div>
          <div v-if="indexs==3">
            <p class="ns1">可用</p>
            <p class="wssl0">{{item.money}}</p>
          </div>
          <div v-if="indexs==3" style="text-align: right">
            <p class="ns1">累计挖矿</p>
            <p>{{item.addmoney}}</p>
          </div>
        </div>
      </div>

      <div
        class="zcmx_block2 wyyc0"
        v-if="bursetype==4"
        style="display: block;"
        v-for="(item,index) in zc_list"
        :key="index"
      >
        <div class="head">{{item.name}}</div>
        <div class="content">
          <div>
            <p class="ns1">授信数量</p>
            <p class="wssl0">{{item.credit}}</p>
          </div>
          <div>
            <p class="ns1">待挖矿数量</p>
            <p class="wssl0">{{item.staymoney}}</p>
          </div>
          <div>
            <p class="ns1">累挖数量</p>
            <p class="wssl0">{{item.addmoney}}</p>
          </div>
        </div>
        <div class="content">
          <div>
            <p class="ns1">日挖上限</p>
            <p class="wssl0">{{item.day_max_money}}</p>
          </div>
          <div>
            <p class="ns1">奖励笔数</p>
            <p class="wssl0">{{item.bonus_nymber}}</p>
          </div>
          <div>
            <p class="ns1">可用</p>
            <p class="wssl0">{{item.money}}</p>
          </div>
        </div>
      </div>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="3" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";
import { constants } from "crypto";

export default {
  name: "asset",
  components: {
    Tabbar
  },
  data() {
    return {
      gmoney:"",
      gcny:"",
      wz2: "",
      wz3: "1",
      bursetype: 1,
      isActive: true,
      indexs: 0,
      info: null,
      zc_list: [],
      zc_list1: [],
      wz30: "",
      wz31: "",
      zc_listh: [],
      zc_listh1: [],
      simg: require("../../assets/wxz.png"),
      istrue: true,
      items: [
        {
          image: require("../../assets/asset_icon1.png"),
          wz1: "钱包账户"
        },
        {
          image: require("../../assets/assets3_bg.png"),
          wz1: "币币账户"
        },
        {
          image: require("../../assets/assets_bg.png"),
          wz1: "OTC账户"
        },
        {
          image: require("../../assets/assets5_bg.png"),
          wz1: "挖矿奖励"
        }
      ],
      downIcon: true
    };
  },
  created: function() {},
  mounted() {
    this.loadList1();
  },
  methods: {
    changePage(current) {
      this.bursetype = current + 1;
      this.indexs = current;
      this.isActive = true;
      console.log("当前轮播图序号为:" + this.bursetype);
      this.loadList1();
    },

    clickHandler(item, index) {
      console.log(item, index);
    },
    collect() {
      this.downIcon = !this.downIcon;
    },
    ts1() {
      this.$createToast({ txt: "请到OTC交易", type: "txt" }).show();
    },
    ts2() {
      this.$createToast({ txt: "请到OTC交易", type: "txt" }).show();
    },
    chooseByts(s) {
      this.isActive = !this.isActive;
      s == 1 ? this.loadList1() : this.loadList2();
    },
    chooseImg() {
      if (this.istrue) {
        this.simg = require("../../assets/xz.png");
        this.zc_list = [];
        for (var i = 0; i < this.zc_list1.length; i++) {
          Number(this.zc_list1[i].money) != 0
            ? this.zc_list.push(this.zc_list1[i])
            : "";
        }
      } else {
        this.zc_list = this.zc_list1;
        this.simg = require("../../assets/wxz.png");
      }
      this.istrue = !this.istrue;
    },
    loadList1() {
      this.$axios
        .post("/index/asset/getCurrency", {
          bursetype: this.bursetype
        })
        .then(res => {
          this.zc_list = [];
          this.zc_list1 = [];
          if (res.data.code == 0) {
            if(this.bursetype==2){
              var clear=(s)=>parseInt(Number(s)*10000)/10000;
              this.gmoney=clear(res.data.allmoneylog.money);
              this.gcny=clear(res.data.allmoneylog.cny);
            }

            this.wz2 = res.data.code;
            this.allzk =
              parseInt(Number(res.data.list.allustd) * 10000) / 10000;
            this.cnya =
              parseInt(Number(res.data.list.allmoney) * 10000) / 10000;
            this.wz30 = parseInt(Number(res.data.converts) * 10000) / 10000;
            this.wz31 = parseInt(Number(res.data.allcny) * 10000) / 10000;
            for (var i = 0; i < res.data.info.length; i++) {
              var a = res.data.info[i].money;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].money = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].waitmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].waitmoney = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].blowmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].blowmoney = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].frostmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].frostmoney = a.substr(0, a.length - 1)))
                : "";
              var turn = String(res.data.info[i].zhcny);

              turn.indexOf(".") != -1
                ? (res.data.info[i].zhcny = turn.substring(
                    0,
                    turn.indexOf(".") + 5
                  ))
                : (res.data.info[i].zhcny = turn);
              console.log(res.data.info[i].zhcny, "money1");
            }
            for (var i = 0; i < res.data.info.length; i++) {
              res.data.info[i].money =
                parseInt(Number(res.data.info[i].money) * 10000) / 10000;
              res.data.info[i].frostmoney =
                parseInt(Number(res.data.info[i].frostmoney) * 10000) / 10000;
            }
            this.zc_list = res.data.info;
            this.zc_list1 = res.data.info;
          } else {
          }
        });
    },
    loadList2() {
      this.$axios
        .post("/index/asset/getCurrencyLog", {
          bursetype: this.bursetype
        })
        .then(res => {
          this.zc_list = [];
          this.zc_list1 = [];
          if (res.data.code == 0) {
            for (var i = 0; i < res.data.info.length; i++) {
              var a = res.data.info[i].money;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].money = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].waitmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].waitmoney = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].blowmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].blowmoney = a.substr(0, a.length - 1)))
                : "";

              a = res.data.info[i].frostmoney;
              a
                ? ((a = Number(a).toFixed(4)),
                  (res.data.info[i].frostmoney = a.substr(0, a.length - 1)))
                : "";
            }
            this.zc_listh = res.data.info;
            this.zc_listh1 = res.data.info;
          } else {
          }
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.cube-slide-item > a > img {
  width: 100%;
}
.asset {
  .zh-list {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    height: 1.6rem;
    span {
      color: #333;
    }
    .f-flex();
    justify-content: space-around;
    font-size: 0.4rem;
    img {
      width: 0.56rem;
      height: 0.56rem;
      margin-right: 0.2rem;
    }
    a {
      .f-flex();
    }
  }
  .head-left {
    text-align: left;
    padding-left: 0.4rem;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    .zc-dy {
      display: flex;
      align-items: center;
      margin-bottom: 0.3rem;
    }
    img {
      width: 0.586667rem;
      height: 0.293333rem;
    }
  }
  .qbzh {
    text-align: left;
    position: absolute;
    color: #fff;
    top: 0.6rem;
    margin-left: 1rem;
    font-size: 0.4rem;
  }
  .zclist_head {
    position: relative;
    height: 1.333333rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    font-size: 0.373333rem;
    border-bottom: 1px solid #ededed;
    padding-left: 4%;
    padding-right: 4%;
    .zcmx,
    .zhls {
      color: #999999;
      margin-right: 0.933333rem;
      height: 1.333333rem;
      line-height: 1.333333rem;
    }
    .zcmx.active,
    .zhls.active {
      position: relative;
      &:after {
        content: "";
        display: block;
        width: 1rem;
        border-bottom: 0.06rem solid #03be87;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -0.5rem;
      }
      color: #03be87;
    }
    .ns3 {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 1.333333rem;
      color: #999999;
      right: 4%;
    }
  }
  .zcmx_block2 {
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #ededed;
    .head {
      text-align: left;
      font-size: 0.4rem;
      font-weight: bold;
      margin: 0.5rem 0;
    }
    .content {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      color: #666666;
      font-size: 0.4rem;
      .ns1 {
        color: #999999;
        font-size: 0.32rem;
      }
      p {
        line-height: 2;
      }
      .ns1 {
        color: #999999;
        font-size: 0.32rem;
        text-align: left;
      }
    }
  }
}

.tname {
  text-align: left;
  font-size: 0.4rem;
  margin-top: 0.5rem;
  font-weight: bold;
  padding-left: 4%;
}

.tdata {
  text-align: left;
  font-size: 0.4rem;
  line-height: 0.9rem;
  padding-left: 4%;
  border-bottom: 1px solid #ededed;
  display: flex;
  justify-content: space-between;
  .ree{
    display: inline-block;
    min-width: 3rem;
    text-align: right;
    padding-right: 4%;
  }
  .ree1{
    color: #666;
  }
}
.tdata1 {
  border: 0;
  color: #999999;
  font-size: 0.32rem;
}
.tdata2{
  font-weight: bold;
  padding-bottom: 0.6rem;
}

</style>

